<template>
  <div>
    <el-tag type="info">{{repo.name}}</el-tag>
    <el-select v-model="selected" filterable @change="change" placeholder="Please select" :clearable="isVirtual()">
      <el-option
          v-for="item in repo.remote"
          :key="item.full_name"
          :label="item.base_name"
          :value="item.full_name">
      </el-option>
    </el-select>
    <div style="margin: 5px 0;"></div>
  </div>
</template>

<script>
export default {
  name: "Repo",
  props: ['repo', 'modelName'],
  mounted() {
  },
  data: function () {
    return {
      selected: this.$store.state.model.modelSettingList[this.modelName]['repos_info'][this.repo.name],
      current: this.repo.current.full_name
    }
  },
  methods: {
    change: function (value) {
      if (value !== this.current) {
        this.$store.commit('updateBranch',
            {
              'model': this.modelName, 'repo': this.repo.name, 'branch': value
            },
        )
      } else {
        this.$store.commit('resetBranch', {
              'model': this.modelName, 'repo': this.repo.name
            }
        )
      }
    },
    isVirtual() {
      for (let m of this.$store.state.model.modelDetailList) {
        if (m.isVirtual === '1') {
          return true
        }
      }
      return false
    }
  },
}
</script>

<style scoped>
.el-select {
  width: 100%;
}
</style>